<template>
  <q-btn  class="button-tag" :color="newCollected ? 'primary' : 'blue-1'" :text-color="newCollected ? 'white' : 'primary'" :flat="!newCollected" @click="collectInstance">
    <q-icon :name="newCollected ? 'star' : 'star_border'" class="q-mr-xs"/> 收藏
  </q-btn>
</template>

<script>
    export default {
      name: 'aCollect',
      props: {
        type: {
          type: String,
          required: true
        },
        id: {
          type: Number,
          required: true
        },
        collected: {
          type: Boolean,
          required: false,
          default: false
        }
      },
      data () {
        return {
          newCollected: null
        }
      },
      created(){
        this.newCollected = this.collected
      },
      computed: {

      },
      watch: {
      },
      methods: {
        async collectInstance(){
          if (!this.auth) {
            this.$router.push('/login')
            return
          }

          const {status} = await this.postRequest({
            api: '/api/{type}/{id}/collect/',
            id: this.id,
            type: this.type
          })

          if (status === 200){
            this.newCollected = !this.newCollected
          }
        }
      }
    }
</script>

<style lang="stylus">
</style>
